<template>
    <div>
        <el-row>
    <el-col :span="6">
      <el-statistic title="营销总额" :value="totalPrice" />
    </el-col>
    <el-col :span="6">
      <el-statistic :value="personNumber">
        <template #title>
          <div style="display: inline-flex; align-items: center">
           消费人数
            <el-icon style="margin-left: 4px" :size="12">
              <Male />
            </el-icon>
          </div>
        </template>
        
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="订单总数" :value="orderToTal" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="评论总数" :value="commentToTal">
        <template #suffix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
    </el-col>
  </el-row>
    </div>
    <el-divider />

    <div class="demo-progress" style="width:70% ; height:400px;">
    目标销售额1000
    <el-progress :percentage="totalPrice/1000*100" :format="format"  color="#f56c6c"style="height: 80px;"/>
    目标人流量100
    <el-progress :percentage="personNumber/1000*100" :format="format"  color="#e6a23c"style="height: 80px;"/>
    目标订单数100
    <el-progress :percentage="orderToTal/100*100" :format="format"  color="#5cb87a"style="height: 80px;"/>
    目标评论数100
    <el-progress :percentage="commentToTal/100*100" :format="format" color="#1989fa" style="height: 80px;"/>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
const orderToTal = ref(0);
const totalPrice = ref(0);
const commentToTal = ref(0);
const personNumber=ref(0);
const business=JSON.parse(sessionStorage.getItem('businessData'))

const getData=()=>{
    axios.get('http://localhost:7444/order/getData/'+business.id)
        .then(response=>{
            if(response.data.code==200){
                orderToTal.value=response.data.data.orderToTal;
                totalPrice.value=response.data.data.totalPrice;
                commentToTal.value=response.data.data.commentToTal;
                personNumber.value=response.data.data.personNumber;
            }
        })
    
}
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>

</style>